import React from "react";
import "./login.css";
import withRouter from '../../utils/withRouter';
import { Form, Icon, Input, Button, Checkbox } from "antd";
import "antd/dist/antd.css";

class NormalLoginForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log("Received values of form: ", values);
        // 验证通过 路由跳转
        this.props.navigate("/map");
      } else {
        console.log(11);
      }
    });
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="bg" key={+new Date()}>
        <div className="title">恭&nbsp;&nbsp;王&nbsp;&nbsp;府</div>
        <div className="login-container">
          {" "}
          {/* 添加一个容器元素 */}
          <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
              {getFieldDecorator("username", {
                rules: [{ required: true, message: "请输入用户名!" }],
              })(
                <Input
                  prefix={
                    <Icon type="user" style={{ color: "rgba(0,0,0,.25)" }} />
                  }
                  placeholder="请输入用户名"
                />
              )}
            </Form.Item>
            <Form.Item>
              {getFieldDecorator("password", {
                rules: [{ required: true, message: "请输入密码!" }],
              })(
                <Input
                  prefix={
                    <Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />
                  }
                  type="password"
                  placeholder="请输入密码"
                />
              )}
            </Form.Item>
            <Form.Item>
              
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                登 陆
              </Button>
              
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

const WrappedNormalLoginForm = Form.create({ name: "normal_login" })(
  NormalLoginForm
);

// 包装你的组件
const EnhancedNormalLoginForm = withRouter(WrappedNormalLoginForm);

class Login extends React.Component {
  render() {
    return (
      <div>
        <EnhancedNormalLoginForm />
      </div>
    );
  }
}

// ReactDOM.render(<Login />, document.getElementById("root"));

export default Login;
